<template>
  <div id="user" style="width: 100%; overflow:hidden;">
    <pub-header title="他的主页">
      <i v-if="userData.uid" class="icon icon-gengduo" style="color: #666;" @click="showMore = true"></i>
    </pub-header>
    <actionsheet v-model="showMore" :menus="more" @on-click-menu="handleMore"></actionsheet>
    <div class="userinfo flex">
      <div class="headpic"><img :src="userData.face" />
        <i class="icon icon-v1"></i>
      </div>
      <div class="info">
        <div class="flex flex-middle" style="height: 0.42rem;overflow:hidden;">
          <b style="font-size: 0.34rem">{{ userData.nick_name  || '未设置昵称' }}</b>
          <div v-if="userData.verify_company != 1 && userData.verify_card == 1" style="background: #ff9800;margin-left: 0.15rem; width: 0.45rem; text-align: center;">
            <i class="icon icon-gerenrenzheng"></i>
          </div>
          <div v-if="userData.verify_company == 1" style="background: #ff9800;margin-left: 0.15rem; width: 0.45rem; text-align: center;">
            <i  class="icon icon-qiye" style="font-size: 0.3rem"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="userlevel">
      <div>
        <p class="title vux-1px-r"><b>VIP{{ userData.level }}</b></p>
        <p>等级</p>
      </div>
      <div>
        <p class="title vux-1px-r"><b>{{ userData.order_qiang }}</b></p>
        <p>成交量</p>
      </div>
      <div @click="toCredits">
        <p class="title"><b>{{ userData.credits }}</b></p>
        <p>信用值</p>
      </div>
    </div>
    <div class="reginfo">
      <div class="title"><b>相关</b></div>
      <div><i class="icon icon-xingxing3"></i><span>主营业务: {{ userData.service }}</span></div>
      <div class="overflowtext"><i class="icon icon-map-menu"></i><span>企业地址: {{ userData.province }}{{ userData.city }}{{ userData.area }}</span></div>
    </div>
    <div class="reginfo" v-if="$route.query.service == '8'">
      <div class="title"><b>优势线路</b></div>
      <div style="height: auto;"><p v-for="item in userData.line">{{ item.line }}</p></div>
    </div>
    <div class="reginfo" v-if="$route.query.service == '6' || $route.query.service == '7'">
      <div class="title"><b>优势服务</b></div>
      <div><i class="icon icon-zhongguoditu"></i><span>{{ userData.service_you }}</span></div>
    </div>
    <div class="reginfo">
      <p class="title flex flex-space-between flex-middle"><b>认证</b></p>
      <div v-if="userData.verify_company != 1">
        <div class="flex flex-middle">
          <i class="icon icon-renzhengyonghu"></i>
          <span>个人认证</span>
          <span class="successinfo" v-if="userData.verify_card == 1">已认证</span>
          <span class="errorinfo" v-else-if="userData.verify_card == 2">未认证</span>
          <span class="errorinfo" v-else-if="userData.verify_card == 3">审核中</span>
          <span class="errorinfo" v-else-if="userData.verify_card == 4">被拒绝</span>
          <span class="errorinfo" v-else-if="userData.verify_card == 5">被撤销</span>
        </div>
      </div>
      <div>
        <div class="flex flex-middle">
          <i class="icon icon-qiye" style="font-size: 0.3rem"></i>
          <span>企业认证</span>
          <span class="successinfo" v-if="userData.verify_company == 1">已认证</span>
          <span class="errorinfo" v-else-if="userData.verify_company == 2">未认证</span>
          <span class="errorinfo" v-else-if="userData.verify_company == 3">审核中</span>
          <span class="errorinfo" v-else-if="userData.verify_company == 4">被拒绝</span>
          <span class="errorinfo" v-else-if="userData.verify_company == 5">被撤销</span>
        </div>
      </div>

    </div>
    <div class="evaluate text-center" style="margin-bottom: 1.2rem;">
      <div class="title"><b>他的评价</b></div>
      <div>
        <rater disabled  v-model="userData.comment_score" active-color="#ff9800"></rater> <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">{{userData.comment_score}}<span style="font-size: 0.24rem;">分</span></span>
      </div>
      <ul class="flex tag">
        <li v-for="item in userData.tag">
          {{ item.chat }}
        </li>
      </ul>
    </div>
    <div class="footer-action flex vux-1px-t">
      <div >
        <a :href="'tel:' + userData.phone" class="flex-middle flex" style="justify-content: center;">
          <i class="icon icon-phone"></i> <span style="font-size: 0.32rem">给他打电话</span>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  import { Rater } from 'vux'
  import { isWechat, getWechatConfig } from '../libs/fn'
  export default{
    components: {
      PubHeader,
      Rater
    },
    created() {
      if(isWechat()) {
        const { path } = this.$route
        getWechatConfig(path, this.$store.state.userInfo.uid, this.$store.state.userInfo.token)
      }
      this.$wechat.ready(() => {
        this.$wechat.onMenuShareAppMessage(this.wechatShareConfig)
        this.$wechat.onMenuShareTimeline(this.wechatShareConfig)
        this.$wechat.onMenuShareWeibo(this.wechatShareConfig)
        this.$wechat.onMenuShareQZone(this.wechatShareConfig)
      })

      const {id, service} = this.$route.query
      if(!id || !service){
        this.$vux.toast.text($config.errMsg, 'middle')
        this.$router.go(-1)
        return
      }
      this.$http.post($config.host + '/api/Userinfo/userPage', qs.stringify({
        id,
        service_id: service,
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const { code, msg, data } = res.data
        if(code == '1') {
          this.userData = data
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    data(){
      return {
        service_id: {
          tongchengzhuanche: 6,
          lingdanzhuanxian: 7,
          chengjizhengche: 8
        },
        wechatShareConfig: {
          title: '刚用了途鸟配送发货，邀您体验！',
          desc: '刚用了途鸟配送发货，感觉超棒！这里送货服务好，发货响应快，同城城际都能用！快来体验！',
          link: $config.wechatHost + '/?#',
          imgUrl: $config.wechatHost + '/static/img/applogo.png'
        },
        userData: [],
        more: [{
          label: '加入黑名单',
          value: 'toBlack'
        }, {
          label: '收藏',
          value: 'toCollection'
        }, {
          label: '投诉和咨询',
          value: 'complaint'
        }],
        showMore: false
      }
    },
    methods: {
      toCredits() {
        if(!this.userData.uid){
            return
        }
        this.$router.push({path: '/user/credits', query: {id: this.userData.uid}})
      },
      toBlack() {
        this.$http.post($config.host + '/api/Subaccount/BlacklistAdd',qs.stringify({
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid,
          phone: this.userData.phone
        })).then((res) => {
          const {code, msg, data} = res.data
          if(code == '1' && data) {
            this.$vux.toast.text('拉黑成功', 'middle')
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.$vux.toast.text(msg, 'middle')
          }
          this.showMore = false
        }).catch((err) => {
          this.showMore = false
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      toCollection() {
        const { service } = this.$route.query
        if(!service || !this.userData.uid) {
            return
        }
        this.$vux.loading.show({
          text: '收藏中...'
        })

        this.$http.post($config.host + '/api/Driver/add', qs.stringify({
          uid: this.$store.state.userInfo.uid,
          phone: this.userData.phone,
          service_id: service,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token
        })).then((res) => {
          this.$vux.loading.hide()
          const {msg} = res.data
          this.$vux.toast.text(msg, 'middle')
        }).catch((err) => {
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      handleMore(val) {
        switch (val){
          case 'toBlack':
              this.toBlack()
            break;
          case 'toCollection':
              this.toCollection()
            break;
          case 'complaint':
              window.location.href = "tel:" + $config.publicTel;
            break;
        }
      }
    }
  }
</script>
<style scoped>
  .userinfo{
    height: 2.8rem;
    margin-top: 0.15rem;
    background: url("../../static/img/user-bg.png") no-repeat center;
    background-size: 100% 100%;
    padding: 0.45rem 0.25rem;
  }
  .headpic{
    height: 1.45rem;
    width: 1.45rem;
    margin: 0rem 0.15rem;
    position: relative;
  }
  .headpic .icon{
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    color: #fff;
    bottom: 0.03rem;
    right: -.1rem;
    line-height: 0.5rem;
    display: block;
    text-align: center;
    background: #ffc800;
    border-radius: 50%;
    font-size: 0.26rem;
  }
  .headpic .icon:after{
    content: '';
    border-radius: 50%;
    position: absolute;
    top: 0.04rem;
    left: 0.04rem;
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid #fff;
  }
  .headpic img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .userinfo .info{
    height: 1.45rem;
    padding: 0.2rem 0.3rem;
    color: #fff;
  }
  .reginfo,.userlevel, .evaluate{
    background: #fff;
    border-radius: 0.1rem;
    box-shadow: 0rem 1px 0.07rem rgba(0,0,0,0.1);
  }
  .evaluate .tag{
    flex-wrap: wrap;
    margin-top: 0.15rem;
  }
  .evaluate .tag li{
    padding: 0.06rem 0.1rem;
    overflow: hidden;
    border:1px #e5e5e5 solid;
    margin-bottom: 0.15rem;
    border-radius: 0.06rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
  }
  .userlevel{
    height: 2rem;
    display: flex;
    padding: 0.5rem 0rem;
    margin: -0.6rem 0.25rem 0.1rem 0.25rem;
  }
  .reginfo{
    padding: 0.25rem 0.25rem 0.25rem 0.8rem;
    margin: 0.2rem 0.25rem 0.1rem;
    color: #6d6d6d;
  }
  .evaluate{
    padding: 0.25rem;
    margin: 0.2rem 0.25rem 0.1rem;
    color: #6d6d6d;
    position: relative;
  }
  .evaluate .title{
    text-align: center;
    position: relative;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
  }
  .evaluate .title b{
    background: #fff;
    width: 2rem;
    position: absolute;
    left:50%;
    margin-left: -1rem;
    display: inline-block;
    z-index: 2;
  }
  .evaluate .title:after{
    content: '';
    position: absolute;
    z-index:0;
    left:0;
    right: 0;
    height: 1px;
    top: 0.29rem;
    background: #e5e5e5;
  }
  .reginfo div{
    height: 0.65rem;
    line-height: 0.65rem;
  }
  .reginfo .title{
    font-size: 0.36rem;
    height: 0.6rem;
    color: #222;
    margin-bottom: 0.15rem;
  }
  .reginfo .icon{
    display: inline-block;
    width: 0.6rem;
  }
  .userlevel>div{
    flex: 1;
    text-align: center;
  }
  .userlevel .title{
    height: 0.65rem;
    color: #222;
    font-size: 0.32rem;
  }
  .successinfo, .errorinfo{
    border: 1px solid #1c9d17;
    color: #1c9d17;
    display: inline-block;
    padding: 0rem 0.12rem;
    height: 0.42rem;
    border-radius: 0.06rem;
    line-height: 0.4rem;
    font-size: 0.26rem;
    margin-left: 0.12rem;
  }
  .errorinfo{
    border: 1px solid #ff5722;
    color: #ff5722;
  }
  .footer-action{
    height: 1rem;
    line-height: 1rem;
    background: rgb(255, 167, 38);

    position: fixed;
    bottom:0;
    right:0;
    left:0;
    text-align: center;
    z-index:2;
  }
  .footer-action a{
    color: #fff;
  }
  .footer-action>div{
    flex: 1;
  }
</style>
